/*
 * @LastEditors: yuSeen
 * @LastEditTime: 2022-01-07 17:55:03
 * 天凉好个秋
 */
import config from "@/config/config";
import { DisplayModeEnmu, ISettingStore } from "@/types/store/settingStore";
import { useConcent } from "concent";
import { useLocalStorage } from '@/hooks/localStorage/useLocalStorage'

const { setStorageItem } = useLocalStorage()

const setup = (ctx: any) => {
  return {
    toggleDisplayMode: (mode?: DisplayModeEnmu) =>
      ctx.moduleReducer.setDisplayMode(mode),
  };
};
export const useDisplayModeSetting = () => {

  const { state, moduleComputed: mcu, settings } = useConcent({ module: "setting", setup });
  
  /**
   * @description: 切换显示模式
   * @param {DisplayModeEnmu} targetMode 目标模式，若不传则认为是切换模式
   * @return {*}
   */
  const setDisPlayMode = (targetMode?: DisplayModeEnmu) => {
    settings.toggleDisplayMode(targetMode);
    const htmlRoot = document.getElementById("htmlRoot") as HTMLElement;
    htmlRoot.setAttribute("data-displayMode", state.displayMode);
    setStorageItem('displayMode', state.displayMode)
    for (let [key, value] of Object.entries(config.style.colors[state.displayMode as DisplayModeEnmu])) {
      htmlRoot.style.setProperty("--" + key, value);
    }
  };

  return {
    displayMode: state.displayMode,
    isDark: mcu.isDark,
    displayModeName: mcu.displayModeName,
    setDisPlayMode,
  };
};
